<template>
	<view class="evaluate pb100" v-if="!loadding" :data-theme="theme()" :class="theme() || ''">
		<form @submit="formSubmit" @reset="formReset">
			<view class="evaluate-item p30" v-for="(item, index) in order_no_s" :key="index">
				订单号：{{item}}
			</view>
			<view class="evalu-value">总金额：{{order_price_sum}}</view>

			<view class="upload-list d-s-c">
				<view class="item">
					<image v-if="img_file_path" lazy-load :src="img_file_path" mode="aspectFit"></image>
				</view>
				<view class="item upload-btn d-c-c d-c" @click="openUpload(0)">
					<text class="icon iconfont icon-xiangji"></text>
					<text class="gray9">上传图片</text>
				</view>
			</view>
			<view>
				<button form-type="submit" class="btn-red theme-btn">确认提交</button>
			</view>
		</form>

		<!--上传图片-->
		<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
	</view>
</template>

<script>
	import Upload from '@/components/upload/upload.vue';
	export default {
		components: {
			Upload
		},
		data() {
			return {
				/*是否加载完成*/
				loadding: true,
				order_price_sum: 0,
				/*是否打开上传图片*/
				isUpload: false,
				image_id: [],
				img: '/static/temp/photo.jpg',
				index: '',
				order_no_s: [],
				length: 0,
				img_file_path: '',
				file_id: 0,
			};
		},
		onLoad(e) {
			this.order_price_sum = e.order_price_sum;

			if(e.length == 1) {
				this.order_no_s = [e.order_no_s];
			} else if(e.length > 1) {
				this.order_no_s = e.order_no_s.split(",");
			}
		},
		mounted() {
			uni.showLoading({
				title: '加载中'
			});
			/*获取页面数据*/
			this.getData();
		},
		methods: {
			getData() {
				let self = this;
				self.loadding = false;
				uni.hideLoading();
			},
			

			/*提交*/
			formSubmit: function() {
				let self = this;
				self._post(
					'user.order/addPayProve', {
						order_no: self.order_no_s,
						pay_prove: self.file_id,
					},
					function(res) {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success() {
								// #ifndef H5
								uni.navigateBack();
								// #endif
								// #ifdef H5
								history.go(-1);
								// #endif
							}
						})
					}
				);
			},

			/*打开上传图片*/
			openUpload(index) {
				this.isUpload = false;
				this.index = index;
				this.isUpload = true;
			},

			/*获取上传的图片*/
			getImgsFunc(e) {
				let self = this;
				// console.log(e[0]);
				// console.log(e);
				self.img_file_path = e[0].file_path;
				self.file_id = e[0].file_id;
				if (e && typeof e != 'undefined') {
					let index = self.index;
					// self.tableData[index].image_list = self.tableData[index].image_list.concat(e);
				}
				self.isUpload = false;
			},

			/*点击图片删除*/
			deleteImg(i, n) {
				let data = this.tableData[i];
				data.image_list.splice(n, 1);
				this.$set(this.tableData, i, data);
			}
		}
	};
</script>

<style>
	.evaluate {
		/* background: #eeeeee; */
	}

	.evaluate-item {
		margin-bottom: 20rpx;
		background: #ffffff;
		border-bottom: 1px solid #dddddd;
	}

	.product .cover,
	.product .cover image {
		width: 160rpx;
		height: 160rpx;
	}

	.evaluate .grade .item .iconfont {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 50%;
		font-size: 40rpx;
		color: #ffffff;
		text-align: center;
	}

	.evaluate .grade .item {
		height: 60rpx;
		padding-right: 20rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		transition: background-color 0.4s;
	}

	.grade .flex-1:nth-child(1) .iconfont {
		background: #f42222;
	}

	.grade .flex-1:nth-child(2) .iconfont {
		background: #f2b509;
	}

	.grade .flex-1:nth-child(3) .iconfont {
		background: #999999;
	}

	.grade .flex-1.active:nth-child(1) .item {
		background: #f42222;
		color: #ffffff;
	}

	.grade .flex-1.active:nth-child(2) .item {
		background: #f2b509;
		color: #ffffff;
	}

	.grade .flex-1.active:nth-child(3) .item {
		background: #999999;
		color: #ffffff;
	}

	.icon-start {
		color: #f5a623;
	}

	.evalu-value {
		display: flex;
		margin-bottom: 30rpx;
	}

	.eval {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.evalu {
		display: flex;
		align-items: baseline;
		flex-direction: column;
	}
</style>